<template>
  <div class="w-full text-xs text-white">
    <div class="mb-4 flex flex-wrap items-center text-sm text-white">
      <div
        class="mr-2.5 mb-2 lg:mr-5 min-w-[140px] lg:min-w-[200px] lg:h-10 h-8 rounded-md flex items-center justify-between ju px-2.5 lg:px-4 bg-[#393d3e]">
        <p class="mr-2 lg:text-base whitespace-nowrap text-[rgba(255,255,255,0.6)]">
          {{ $mt('Total Reviews') }}
        </p>
        <p class="text-white">{{ totalReviewsInfo.totalReviews || 0 }}</p>
      </div>
      <div
        class="mr-2.5 mb-2 min-w-[140px] lg:min-w-[200px] lg:h-10 h-8 rounded-md flex items-center justify-between px-2.5 bg-[#393d3e]">
        <p class="mr-2 lg:text-base whitespace-nowrap text-[rgba(255,255,255,0.6)]">
          {{ $mt('Avg Ratings') }}
        </p>
        <div class="flex items-center">
          <WImage class="w-3 h-3 mr-1" :src="useAsset('detail/item_icon_star.png')" />
          <p class="text-white">{{ totalReviewsInfo.avgReviews || 0 }}</p>
        </div>
      </div>
    </div>
    <!-- 评论列表 -->
    <div
      v-if="curGoodsDetail?.reviews?.length"
      class="w-full pb-2 text-xs text-white grid gap-6 grid-cols-1 lg:grid-cols-2">
      <div class="flex w-full justify-between" v-for="(item, index) in curGoodsDetail.reviews" :key="index">
        <img
          loading="lazy"
          class="ltr:mr-2.5 rtl:ml-2.5 h-10 w-10 rounded-[50%]"
          alt="customer avatar"
          :src="useAsset('avatar')"
          width="40"
          height="40" />
        <div class="flex-1">
          <div class="flex items-center mb-1.5">
            <span class="ltr:mr-2.5 rtl:ml-2.5 text-sm">{{ item.userName }}</span>
            <span v-if="item.leaveAt" class="text-xs text-[rgba(255,255,255,0.4)] whitespace-nowrap ml-auto">
              {{ dayjs(item.leaveAt).format('YYYY/MM/DD') }}
            </span>
          </div>
          <van-rate class="h-3 mb-2" :model-value="item.rating" color="#02bbff" size="12px" />
          <strong class="text-white2 font-normal line-clamp-2 lg:line-clamp-5 text-sm lg:text-base leading-6">
            {{ item.comment }}
          </strong>
        </div>
      </div>
    </div>
    <common-empty v-else class="mt-6 mb-4" />
    <!-- <van-empty v-else image="/v2/home-imgs/empty2.png" :description="$mt('nothing here')" /> -->
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import { useGoodsStore } from '~/store/goods'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
import dayjs from 'dayjs'

const goodsStore = useGoodsStore()
const { totalReviewsInfo, curGoodsReviews, curGoodsDetail, reviewsInfo } = storeToRefs(goodsStore)
</script>

<style lang="scss"></style>
